import React from 'react';

// @ts-ignore
const wx: any = window.wx;
export default class App extends React.Component {

  componentDidMount() {

    // @ts-ignore
    window.wx.ready((res: any) => {
      console.log('wx.ready', res);
    });
    // @ts-ignore
    window.wx.error((error: any) => {
      console.log('wx.error', error);
    });
  }

  doFetch() {

    fetch('https://abouti.top/wx/home/getJsSignature', { method: 'get' })
    .then((v) => v.json())
    .then((res) => {
      console.log('res', res);
      // @ts-ignore
      window.wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: res.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
        timestamp: res.timestamp, // 必填，生成签名的时间戳
        nonceStr: res.noncestr, // 必填，生成签名的随机串
        signature: res.signature, // 必填，签名，见附录1
        jsApiList: [
          'updateAppMessageShareData',
          'updateTimelineShareData',
          'scanQRCode',
        ], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
      });
    }).catch((err) => {
      console.log('err', err);
    });
  }

  // 扫一扫
  scan = ()=> {

    // @ts-ignore
    window.wx.scanQRCode({
      needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
      scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
      success:  (res:any)=> {
        let result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
        alert(result)
      }
    })
  }

  render() {

    return (
      <div style={{ display: 'flex', height: '400px', justifyContent: 'center', alignItems: 'center' }}>
        <div>
          <a onClick={() => {
            this.doFetch();
          }}><p style={{width: '80pt', height: '30pt', backgroundColor: 'red', color: 'white'}}>点击注册</p></a>

          <a onClick={() => this.scan() }><p style={{width: '80pt', height: '30pt', backgroundColor: 'red', color: 'white'}}>打开扫一扫</p></a>
        </div>
      </div>
    );
  }
}
